<template>
    <div>
        <UserMb>
            <template slot="title">
                <div>
                    <span class="f18 c21">账户余额：</span>
                    <span class="f18 ce8">¥{{ye}}</span>
                </div>
            </template>
            <template slot="content">
                <div class="content">
                    <div class="h1">请选择充值金额：</div>
                    <div  class="divList flex f-s">
                        <div class="Num flex" :class="{'NumOn':v.falg}" v-for="(v,k) in numArr" :key="k + 'numArr'" @click="on(numArr,k)">{{v.text}}</div>
                    </div>
                    <div class="h2">充值有礼</div>
                </div>
            </template>
        </UserMb>
    </div>
</template>

<script>
import UserMb from "../../gj/UserMb";
export default {
    name:"MyQb",
    data() {
        return {
            ye:20,
            numArr:[
                {falg:false,text:"500元"},
                {falg:false,text:"1000元"},
                {falg:false,text:"2000元"},
                ],
        }
    },
    methods: {
        on(arr,k){
            arr.forEach((v)=>{
                v.falg = false;
            });
            arr[k].falg=true;
        }
    },
    components:{
        UserMb,
    }
}
</script>

<style scoped>
* {
  font-size: 0;
  color: #333333;
}
.f-s {
  justify-content: flex-start;
}
.f-e {
  justify-content: flex-end;
}
.fd-c {
  flex-direction: column;
}
.ai-fs {
  align-items: flex-start;
}
.ai-fe {
  align-items: flex-end;
}
.f18 {
  font-size: 18px;
}
.f16 {
  font-size: 16px;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.c3 {
  color: #333333;
}
.c6 {
  color: #666666;
}
.c9 {
  color: #999999;
}
.c25 {
  color: #252525;
}
.c2a {
  color: #2a2a2a;
}
.c21{
    color: #212121;
}
</style>

<style scoped>
.ce8{
    color: #e85e35;
}
.content{
    margin-top: 20px;
    margin-left: 40px;
}
.h1{
    height: 17px;
    line-height: 17px;
    margin: 20px 0;
    font-size: 18px;
    color: #212121;
}
.divList{
    height: 34px;
    margin-bottom: 40px;
}
.Num{
    width: 113px;
    height: 32px;
    font-size: 18px;
    color: #2a2a2a;
    margin-right: 37px;
    border: 1px solid #d4d4d4;
    cursor: pointer;
}
.NumOn{
    background-color: #f4fff2;
    border-color: #64a130;
}
.h2{
    height: 17px;
    line-height: 17px;
    margin-bottom: 20px;
    font-size: 18px;
    color: #f08200;
}
</style>